<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue讲解</title>

<link href="./css/base.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div>
    <div class="hd1">vue router 路由</div>
    <a href="https://blog.csdn.net/weixin_45438997/article/details/119732764" target="_blank">axios通过cdn引入使用小计</a>
</div>
<div id="first">
    <!-- 路由入口，这里将会在浏览器被渲染成a标签，点击不同的入口将会在路由的出口渲染出匹配的组件 -->
    <router-link to="/foo">跳转到Foo</router-link>
    <router-link to="/bar">跳转到Bar</router-link>
    <router-link to="/">退回到根目录</router-link>
    <!-- 路由出口，点击路由的入口后，会在这里渲染出组件 -->
    <router-view></router-view>
</div>
 
<script type="text/javascript">
var foo = `<div><h1>这里是FOO</h1></div>`;
var bar = `<div><h1>这里是BAR</h1></div>`;
	
 
var vm = new Vue({
        el: '#first',
        router:new VueRouter({ 
          routes:[ 
            {
                path:'/',
                // redirect:'/foo'
            }, // 这个表示会默认渲染foo
            {path:'/foo',component:{template: foo}},
            {path:'/bar',component:{template: bar}}
          ]
        })
})
</script>
</body>
</html>